<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双柳煤矿安全语音码亲情互动平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <!-- 顶部导航 -->
    <nav class="bg-red-800 text-white p-4">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-xl font-bold">双柳煤矿安全语音码平台</h1>
            <div class="flex items-center space-x-4">
                <button id="loginBtn" class="bg-red-600 px-4 py-2 rounded hover:bg-red-700">
                    <i class="fas fa-user"></i> 登录/注册
                </button>
                <span id="userInfo" class="hidden">
                    <span id="userName"></span>
                    <button id="logoutBtn" class="ml-2 text-sm underline">退出</button>
                </span>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="container mx-auto p-6">
        <!-- 欢迎区域 -->
        <div class="bg-white rounded-lg shadow-lg p-8 mb-6 text-center">
            <h2 class="text-3xl font-bold text-red-800 mb-4">安全语音 · 亲情传递</h2>
            <p class="text-gray-600 text-lg">为双柳煤矿特殊工种员工与家人搭建的安全互动桥梁</p>
        </div>

        <!-- 功能按钮区域 -->
        <div class="flex justify-center space-x-8 mb-8">
            <button id="generateVoiceBtn" class="bg-red-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-red-700 transition duration-300">
                <i class="fas fa-microphone mr-2"></i>生成我的安全语音码
            </button>
            <button id="viewManualBtn" class="bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-700 transition duration-300">
                <i class="fas fa-book mr-2"></i>查看安全手册
            </button>
        </div>

        <!-- 员工功能区域 -->
        <div id="employeeArea" class="hidden">
            <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
                <h3 class="text-xl font-bold mb-4">我的安全语音</h3>
                
                <!-- 录音区域 -->
                <div id="recordingArea" class="mb-6">
                    <button id="startRecording" class="bg-green-600 text-white px-6 py-3 rounded-lg mr-4">
                        <i class="fas fa-microphone"></i> 开始录音
                    </button>
                    <button id="stopRecording" class="bg-red-600 text-white px-6 py-3 rounded-lg hidden">
                        <i class="fas fa-stop"></i> 停止录音
                    </button>
                    <div id="recordingStatus" class="mt-2 text-sm text-gray-600"></div>
                </div>

                <!-- 二维码显示区域 -->
                <div id="qrDisplayArea" class="hidden">
                    <h4 class="text-lg font-semibold mb-2">您的专属二维码</h4>
                    <div class="flex items-center space-x-4">
                        <img id="qrCode" class="w-48 h-48 border">
                        <div>
                            <button id="copyQrBtn" class="bg-blue-600 text-white px-4 py-2 rounded mb-2">
                                <i class="fas fa-copy"></i> 复制二维码
                            </button>
                            <button id="shareWechatBtn" class="bg-green-600 text-white px-4 py-2 rounded">
                                <i class="fab fa-weixin"></i> 微信分享
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 互动统计 -->
                <div id="interactionStats" class="mt-6 p-4 bg-gray-50 rounded-lg">
                    <h4 class="text-lg font-semibold mb-2">互动统计</h4>
                    <div class="grid grid-cols-3 gap-4 text-center">
                        <div>
                            <div id="employeeVoiceCount" class="text-2xl font-bold text-blue-600">0</div>
                            <div class="text-sm text-gray-600">我的语音</div>
                        </div>
                        <div>
                            <div id="familyVoiceCount" class="text-2xl font-bold text-green-600">0</div>
                            <div class="text-sm text-gray-600">家人语音</div>
                        </div>
                        <div>
                            <div id="familyPhotoCount" class="text-2xl font-bold text-purple-600">0</div>
                            <div class="text-sm text-gray-600">家人照片</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 家人消息列表 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h3 class="text-xl font-bold mb-4">家人的安全叮嘱</h3>
                <div id="familyMessages" class="space-y-4">
                    <!-- 动态加载家人消息 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 登录/注册模态框 -->
    <div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
        <div class="bg-white rounded-lg p-6 w-96">
            <h3 class="text-xl font-bold mb-4">员工登录/注册</h3>
            <form id="authForm">
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">手机号</label>
                    <input type="tel" id="phone" class="w-full border rounded px-3 py-2" required>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">密码</label>
                    <input type="password" id="password" class="w-full border rounded px-3 py-2" required>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">姓名（注册时填写）</label>
                    <input type="text" id="name" class="w-full border rounded px-3 py-2">
                </div>
                <div class="flex space-x-4">
                    <button type="submit" class="flex-1 bg-red-600 text-white py-2 rounded">登录</button>
                    <button type="button" id="registerBtn" class="flex-1 bg-green-600 text-white py-2 rounded">注册</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 安全手册模态框 -->
    <div id="manualModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
        <div class="bg-white rounded-lg p-6 w-full max-w-4xl max-h-screen overflow-y-auto">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">煤矿特殊工种安全操作指南</h3>
                <button id="closeManualBtn" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <div id="manualContent" class="prose max-w-none">
                <!-- 安全手册内容 -->
            </div>
        </div>
    </div>

    <!-- 底部信息 -->
    <footer class="bg-gray-800 text-white text-center p-4 mt-8">
        <p>双柳煤矿人力资源中心刘春亮团队监制</p>
        <p class="text-sm text-gray-400">技术支持：双柳煤矿人力资源中心</p>
    </footer>

    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
